<script src="../main.js"></script>
<template>
  <div class="hello">
    <div class="chart" v-if="keys" ref="chart"></div>
    <button @click="btn">确认</button>
  </div>
</template>
<script>
import {createEchart} from "@/echarts";

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      keys: true,
      pies: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: "false",
            },
            data: [
              {
                value: 1048,
                name: "搜索引擎",
              },
              {
                value: 735,
                name: "接访问",
              },
              {
                value: 580,
                name: "邮件营销",
              },
              {
                value: 484,
                name: "联盟广告",
              },
              {
                value: 300,
                name: "视频广告",
              },
            ],
          },
        ],
      },
      option: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
          },
          {
            data: [100, 230, 224, 218, 135, 147, 260],
          },
          {
            data: [50, 230, 224, 218, 135, 147, 260],
          },
          {
            data: [200, 230, 224, 218, 135, 147, 260],
          },
        ],
      },
      chart: null,
    };
  },
  mounted() {
    this.chart = new createEchart({
      dom: ".hello .chart",
      options: this.option,
      mixin: [
        {
          xAxis: {
            data: [150, 230, 224, 218, 135, 147, 260],
          }
        },
        {
          yAxis: {
            data: [150, 230, 224, 218, 135, 147, 260],
          }
        },
        {
          series: {
            type: 'line'
          }
        }
      ]
    });
    this.chart
        .data({
          'xAxis': [1, 2, 3, 4, 5, 6, 17],
          'series': [
            [150, 230, 224, 218, 135, 147, 260],
            [100, 230, 224, 218, 135, 147, 260],
            [50, 230, 224, 218, 135, 147, 260],
            [200, 230, 224, 218, 135, 147, 260],
          ]
        })
        .render()
    console.log(this.chart)
    // console.log(this.option)
  },
  methods: {
    btn() {
      this.keys = true;
      console.log(this.chart);
      // this.chart
      //   .data([[20, 20, 20, 20, 20, 50, 70]])
      //   .data("xAxis", [1, 2, 3, 4, 5, 6, 7]);
      this.$nextTick(() => {
        this.chart.data([[5, 5, 5, 5, 4, 4, 5, 7]])
        this.chart.render();
      });
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chart {
  width: 600px;
  height: 400px;
  border: 1px solid red;
  background: #000;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
